其他
适合新手入门的vue2答题小项目
大家好，我是TJ
关注TJ君，回复“武功秘籍”免费获取计算机宝典书籍
TJ君将之前发过的各种项目及工具进行了整理，收录到了GitHub项目，欢迎各位小伙伴光临Star，地址如下：https://github.com/Wechat-TJ/TJ-WORLD-FORU
又是阳光明媚的一个周末，今天TJ君给大家来分享一个vue2 + vue-router + vuex 入门项目，vue2-happyfri
vue2-happyfri，其实是一个简单明了的在线问答系统，整个项目虽然小，但是流程上一目了然，小归小胜在五脏俱全，非常想适合作为入门练习，想学习vue方面的小伙伴不妨一试。
项目运行命令如下：
#克隆代码到本地
# 进入文件夹
cd vue2-happyfri
# 安装依赖
npm install 或 yarn(推荐)
# 开启本地服务器localhost:8088
npm run dev
# 发布环境
npm run build
路由配置如下：
import App from '../App'
export default [{
path: '/',
component: App,
children: [{
path: '',
component: r => require.ensure([], () => r(require('../page/home')), 'home')
}, {
path: '/item',
component: r => require.ensure([], () => r(require('../page/item')), 'item')
}, {
path: '/score',
component: r => require.ensure([], () => r(require('../page/score')), 'score')
}]
}]
配置动作如下：
import ajax from '../config/ajax'
export default {
addNum({ commit, state }, id) {
//点击下一题，记录答案id，判断是否是最后一题，如果不是则跳转下一题
commit('REMBER_ANSWER', id);
if (state.itemNum < state.itemDetail.length) {
commit('ADD_ITEMNUM', 1);
}
},
//初始化信息
initializeData({ commit }) {
commit('INITIALIZE_DATA');
}
}
整体的运行效果是这样的：
新手小伙伴们，赶紧来mark学习吧
点击下方卡片，关注公众号“TJ君”
回复“做题2022”，获取仓库地址
关注我，每天了解一个牛x、好用、有趣的东东